<template>
    <el-dialog :close-on-click-modal="false"  ref="dialogform" :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="单位提交" name="first">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="单位名称" prop="unitName">
                        <el-input v-model="ruleForm.unitName" class="w100p" placeholder="请输入单位名称"></el-input>
                    </el-form-item>
                    <el-form-item label="单位类型" prop="unitTypeNo">
                        <el-select v-model="ruleForm.unitTypeNo" filterable clearable placeholder="请选择单位类型">
                            <el-option v-for="item, index in typList" :key="index" :label="item.unitTypeName"
                                :value="item.unitTypeNo">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单位符号" prop="symbol">
                        <el-input v-model="ruleForm.symbol" class="w100p" placeholder="请输入单位符号"></el-input>
                    </el-form-item>
                    <el-form-item label="标准换算比例" prop="basicRatio">
                        <el-input-number v-model="ruleForm.basicRatio" class="w50p" placeholder="请输入比例"></el-input-number>
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input type="textarea" v-model="ruleForm.description" class="w100p" placeholder="请输入描述"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="单位提交历史" name="second">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="unitTypeName" label="单位类型" width="150">
                    </el-table-column>
                    <el-table-column prop="unitName" label="单位名称">
                    </el-table-column>
                    <el-table-column prop="symbol" label="单位符号">
                    </el-table-column>
                    <el-table-column label="状态" fixed="right">
                        <template slot-scope="scope">
                            <span>{{ scope.row.applyStatus == 0 ? '通过' : '' }}</span>
                            <span>{{ scope.row.applyStatus == 1 ? '审核中' : '' }}</span>
                            <span>{{ scope.row.applyStatus == 2 ? '不通过' : '' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" :disabled="scope.row.applyStatus !== 1"
                                @click="handleEdit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button v-show="activeName == 'first' && addEditFlag == 'edit'" @click="cancelEdit">取消修改</el-button>
            <el-button type="primary" v-show="activeName == 'first'" @click="submitForm">{{ addEditFlag == 'edit' ? '提交修改' :
                '提交审核' }}</el-button>
        </span>
    </el-dialog>
</template>
<script>
import publicLnterface from '@/api/publicLnterface';
export default {
    components: {},
    props: {
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        typList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            addEditFlag: 'add',
            activeName: 'first',
            tableData: [{
                item1: '重量单位',
                item2: '斤',
                item3: '斤'
            }, {
                item1: '重量单位',
                item2: '千克',
                item3: 'kg'
            }],
            addEditApi: '',
            ruleForm: {},
            rules: {
                item1: [
                    { required: true, message: '请输入单位名称', trigger: 'change' }
                ],
                item2: [
                    { required: true, message: '请选择单位类型', trigger: 'change' }
                ],
                item3: [
                    { required: true, message: '请选择月份', trigger: 'change' }
                ],
                item4: [
                    { required: true, message: '请选择月份', trigger: 'change' }
                ]
            }
        }
    },
    computed: {

    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },
    
    mounted() { },
    methods: {
        initData() {
            this.addEditFlag = 'add';
            this.addEditApi = publicLnterface.addApplyUnit;
            this.applyData();
        },
        async applyData() {
            let { data } = await publicLnterface.applyUnit({});
            this.tableData = data || [];
        },
        handelChange(e) {
            console.log(e)
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleEdit(row) {
            this.addEditFlag = 'edit';
            this.addEditApi = publicLnterface.editApplyUnit;
            this.activeName = 'first';
            this.ruleForm = JSON.parse(JSON.stringify(row))
            console.log(this.ruleForm)
        },
        //提交表单
        submitForm() {
            console.log(this.ruleForm)
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.addEditApi({ ...this.ruleForm }).then(res => {
                        if (res.code == 1) {
                            this.$message.success('操作成功，待管理员审核！')
                            this.activeName = 'second';
                            this.addEditFlag = 'add';
                            this.applyData();
                            this.resetForm();
                        } else {
                            this.$message.success(err.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.success(err.msg || '操作失败')
                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm() {
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        cancelEdit(){
            this.resetForm();
            this.addEditFlag = 'add';
        },
        //取消关闭
        cancel() {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped></style>
  